home *** CD-ROM | disk | FTP | other *** search
/ Chip 2004 December / 2004-12 CHIP.iso / Internet / NVU 0.50 for Windows / nvu-0.50-win32-installer-full.exe / {app} / chrome / comm.jar / content / editor / ExtractStyles.js < prev    next >
Encoding:
Text File  |  2004-03-19  |  7.2 KB  |  243 lines
  1. const kIdSeedStr = "abcdefghijklmnopqrestuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
  2.  
  3. function Startup()
  4. {
  5.   var dialogNode = document.getElementById("extractStyleDlg");
  6.  
  7.   gDialog.okButton          = dialogNode.getButton("accept");
  8.   gDialog.warning           = document.getElementById("warning");
  9.   gDialog.idTextbox         = document.getElementById("idTextbox");
  10.   gDialog.applicationField  = document.getElementById("applicationField");
  11.   gDialog.classCheckbox     = document.getElementById("classCheckbox");
  12.   gDialog.classTextbox      = document.getElementById("classTextbox");
  13.   gDialog.typeCheckbox      = document.getElementById("typeCheckbox");
  14.   gDialog.hoveredCheckbox   = document.getElementById("hoveredCheckbox");
  15.  
  16.   gDialog.okButton.disabled = true;
  17.  
  18.   gDialog.firingElement = window.opener.gContextMenuFiringDocumentElement;
  19.   if (gDialog.firingElement.hasAttribute("id"))
  20.   {
  21.     gDialog.idTextbox.value = gDialog.firingElement.getAttribute("id");
  22.     ControlElementId(gDialog.idTextbox);
  23.   }
  24. }
  25.  
  26. function ControlElementId(e)
  27. {
  28.   var id = e.value;
  29.   id = id.replace(/ /g,"");
  30.   e.value = id;
  31.  
  32.   if (!id || (id != gDialog.firingElement.getAttribute("id") &&
  33.               GetCurrentEditor().document.getElementById(id)))
  34.   {
  35.     // oops, it already exists!
  36.     gDialog.okButton.disabled = true;
  37.     // show the warning if and only if the id is not empty
  38.     if (id)
  39.       gDialog.warning.removeAttribute("hidden");
  40.   }
  41.   else
  42.   {
  43.     gDialog.okButton.disabled = false;
  44.     gDialog.warning.setAttribute("hidden", true);
  45.   }
  46. }
  47.  
  48. function ChooseId()
  49. {
  50.   var idStr = "moz_";
  51.   for (var i=0; i<8; i++)
  52.   {
  53.    idStr += kIdSeedStr[Math.floor(Math.random()*52)+1]
  54.   }
  55.   idStr += Math.floor(Math.random()*10000);
  56.   gDialog.idTextbox.value = idStr;
  57.   ControlElementId(gDialog.idTextbox);
  58. }
  59.  
  60. function CheckOkButtonState()
  61. {
  62.   var applicationField = gDialog.applicationField.value;
  63.   if (applicationField == "" || applicationField == "thisElementOnly")
  64.     ControlElementId(gDialog.idTextbox);
  65.   else
  66.     gDialog.okButton.disabled = (gDialog.classCheckbox.checked &&
  67.                                  !gDialog.classTextbox.value);
  68. }
  69.  
  70. function ApplicationFieldSelect()
  71. {
  72.   var applicationField = gDialog.applicationField.value;
  73.   var tho = (applicationField == "thisElementOnly")
  74.  
  75.   SetElementEnabledById("idLabel",          tho);
  76.   SetElementEnabledById("idTextbox",        tho);
  77.   SetElementEnabledById("idChooseButton",   tho);
  78.  
  79.   SetElementEnabledById("classCheckbox",   !tho);
  80.   SetElementEnabledById("classTextbox",    (!tho && gDialog.classTextbox.checked));
  81.   SetElementEnabledById("typeCheckbox",    !tho);
  82.   SetElementEnabledById("hoveredCheckbox", !tho);
  83.  
  84.   CheckOkButtonState();
  85. }
  86.  
  87. function ClassTestSelect()
  88. {
  89.   gDialog.okButton.disabled = (gDialog.classCheckbox.checked && gDialog.classTextbox.value == "");
  90.   SetElementEnabledById("classTextbox", gDialog.classCheckbox.checked);
  91. }
  92.  
  93. function onAccept()
  94. {
  95.   // aaaah, interesting stuff start here ;-)
  96.   // first, get the context
  97.   var applicationField = gDialog.applicationField.value;
  98.   var selector = "*";
  99.  
  100.   switch (applicationField)
  101.   {
  102.     case "allElements":
  103.       if (gDialog.typeCheckbox.checked)
  104.         selector =  gDialog.firingElement.nodeName.toLowerCase();
  105.       if (gDialog.classCheckbox.checked)
  106.         selector += "." + gDialog.classTextbox.value;
  107.       if (gDialog.hoveredCheckbox.checked)
  108.         selector += ":hover";
  109.       break;
  110.     case "thisElementOnly":
  111.     default:
  112.       selector = "*#" + gDialog.idTextbox.value;
  113.       break;
  114.   }
  115.  
  116.   // now, let's try to remove the existing styles for the same selector.
  117.   var doc = GetCurrentEditor().document;
  118.   var stylesheets = doc.styleSheets;
  119.   var insertionPoint = null;
  120.  
  121.   if (stylesheets)
  122.   {
  123.     var stylesheetsLength = stylesheets.length;
  124.     if (stylesheetsLength)
  125.     {
  126.       // look at all stylesheets attached to the document
  127.       var sheetIndex;
  128.       for (sheetIndex = 0; sheetIndex < stylesheetsLength; sheetIndex++)
  129.       {
  130.         // we can modify only the ones embedded in the document through a
  131.         // STYLE element
  132.         var stylesheet = stylesheets.item(sheetIndex);
  133.         var ownerNode  = stylesheet.ownerNode;
  134.         // warning, chrome stylesheets have no ownerNode...
  135.         if (ownerNode &&
  136.             ownerNode.nodeType == Node.ELEMENT_NODE &&
  137.             ownerNode.nodeName.toLowerCase() == "style")
  138.         {
  139.           insertionPoint = stylesheet;
  140.           // TODO: we _should_ be looking at the medialist...
  141.           var cssRules = stylesheet.cssRules;
  142.           if (cssRules)
  143.           {
  144.             var ruleLength = cssRules.length;
  145.             if (ruleLength)
  146.             {
  147.               var ruleIndex;
  148.               var modified = false;
  149.               for (ruleIndex = 0; ruleIndex < ruleLength; ruleIndex++)
  150.               {
  151.                 // we are looking for style rules
  152.                 var rule = cssRules.item(ruleIndex);
  153.                 if (rule.type == CSSRule.STYLE_RULE)
  154.                 {
  155.                   var deleteThisRule = false;
  156.                   // what's its selector ?
  157.                   var selectorText = rule.selectorText;
  158.                   if (selectorText == selector)
  159.                   {
  160.                     // YEP!
  161.                     deleteThisRule = true;
  162.                   }
  163.                   else if (selector[0] == "*" &&
  164.                            selector == "*" + selectorText)
  165.                   {
  166.                     // Yep too!
  167.                     deleteThisRule = true;
  168.                   }
  169.                   if (deleteThisRule)
  170.                   {
  171.                     stylesheet.deleteRule(ruleIndex);
  172.                     ruleIndex--;
  173.                     ruleLength--;
  174.                     modified = true;
  175.                   }
  176.                 }
  177.               }
  178.               // let's rely on CaScadeS to serialize the sheet
  179.               if (modified)
  180.                 SerializeEmbeddedSheet(stylesheet);
  181.             }
  182.           }
  183.         }
  184.       }
  185.     }
  186.   }
  187.  
  188.   var insertionPointOwnerNode;
  189.   if (!insertionPoint)
  190.   {
  191.     insertionPointOwnerNode = doc.createElement("style");
  192.     insertionPointOwnerNode.setAttribute("type", "text/css");
  193.     doc.getElementsByTagName("head")[0].appendChild(insertionPointOwnerNode);
  194.   }
  195.   else
  196.     insertionPointOwnerNode = insertionPoint.ownerNode;
  197.  
  198.   var ruleText = "\n" + selector + "\n{\n";
  199.   var styles = gDialog.firingElement.style;
  200.   if (styles)
  201.   {
  202.     var l = styles.length, i;
  203.     for (i = 0; i < l; i++)
  204.     {
  205.       var property   = styles.item(i);
  206.       var value      = styles.getPropertyValue(property);
  207.       var importance = styles.getPropertyPriority(property);
  208.  
  209.       ruleText += "  " + property + ": " + value;
  210.       if (importance)
  211.         ruleText += " ! important";
  212.       ruleText += ";\n";
  213.     }
  214.   }
  215.   ruleText += "}\n\n";
  216.  
  217.   var textNode = doc.createTextNode(ruleText);
  218.   insertionPointOwnerNode.appendChild(textNode);
  219.  
  220.   gDialog.firingElement.removeAttribute("style");
  221.   gDialog.firingElement.removeAttribute("id");
  222.   gDialog.firingElement.removeAttribute("class");
  223.   switch (applicationField)
  224.   {
  225.     case "allElements":
  226.       if (gDialog.classCheckbox.checked)
  227.         gDialog.firingElement.setAttribute("class", gDialog.classTextbox.value);
  228.       break;
  229.     case "thisElementOnly":
  230.     default:
  231.       gDialog.firingElement.setAttribute("id", gDialog.idTextbox.value);
  232.       break;
  233.   }
  234.  
  235.   GetCurrentEditor().incrementModificationCount(1);
  236. }
  237.  
  238.  
  239.  
  240.  
  241.  
  242.  
  243.